<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{msg.a.b.name}}
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{
            msg:{
                a:{
                    b:{
                       name:"xxx"
                    }
                }
            }
        },
        /*watch:{
            msg:{
                handler(newVal,oldVal){
                    console.log("watch-msg")
                },
                immediate:true, //让msg对应的handler在vue初始化的时候就被调用
                deep:true //开启深度监听
            }
        },*/
        mounted(){
            setTimeout(()=>{
                this.msg.a.b.name="yyyy"
            },1000)

            //深度监听msg
            this.$watch("msg",{
                handler(){
                    console.log("---")
                },
                immediate:true,
                deep:true
            })
        }
    })
</script>
</html>